<template>
  <div class="about">
    <t-navbar
      title="标题文字"
      :fixed="false"
      left-arrow
      @left-click="handleClick"
    />
    <div class="canvas-container">
      <canvas id="canvas"></canvas>
    </div>
    <div class="bottom-menus">
      <t-button @click="page -= 1" :disabled="page <= 1" variant="text">上一页</t-button>
      <span>第 {{ page }} / {{ pages }} 页</span>
      <t-button @click="page += 1" :disabled="page >= pages" variant="text">下一页</t-button>
    </div>
  </div>
</template>

<script>
window.pdfjsLib.GlobalWorkerOptions.workerSrc = "/static/js/pdf.worker.mjs";
export default {
  name: "AboutView",
};
</script>

<script setup>
import { onMounted, ref, watch } from "vue";
let pdf;
const page = ref(1);
const pages = ref(1);

watch(() => page.value, (newPage) => {
  openPage(newPage);
});

async function loadPdf() {
  const loadingTask = pdfjsLib.getDocument("/static/test.pdf");
  try {
    pdf = await loadingTask.promise;
    console.log("PDF loaded", pdf, pdf.numPages);
    pages.value = pdf.numPages;
    await openPage(page.value);
    
  } catch (error) {
    console.error("Error loading PDF:", error);
  }
}

async function openPage (pageNum) {
  // 获取容器宽度来计算合适的缩放比例
  const container = document.querySelector(".canvas-container");
    const containerWidth = container.clientWidth;

    const page = await pdf.getPage(pageNum);
    const originalViewport = page.getViewport({ scale: 1 });

    // 计算适合容器宽度的缩放比例
    const scale = containerWidth / originalViewport.width;

    const viewport = page.getViewport({ scale });
    const canvas = document.querySelector("#canvas");
    const context = canvas.getContext("2d");

    // 设置canvas尺寸为viewport的尺寸
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    // 渲染页面到 Canvas
    const renderContext = {
      canvasContext: context,
      viewport: viewport,
    };

    const content = await page.render(renderContext).promise;
    console.log("渲染完成", content);
}

// 添加窗口大小变化的处理
function handleResize() {
  loadPdf();
}

onMounted(() => {
  loadPdf();
  window.addEventListener("resize", handleResize);
});
</script>

<style scoped>
.about {
  width: 100%;
  min-height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background-color: var(--td-bg-color-container);
}

.canvas-container {
  width: 100%;
  margin-top: 10px;
  max-width: 1000px; /* 最大宽度限制 */
  margin: 0 auto;
  overflow-x: hidden;
  background-color: #1a1a1a;
}

canvas {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* 平板设备 */
@media screen and (max-width: 768px) {
  .about {
    padding: 10px;
  }
}

/* 移动设备 */
@media screen and (max-width: 480px) {
  .about {
    padding: 5px;
  }
}
.bottom-menus {
  box-sizing: border-box;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  bottom: 20px;
  width: 100%;
  color: var(--td-text-color-secondary);
}
</style>
<style></style>
